import React, { Component } from 'react'
import { Layout, Breadcrumb, Pagination, Form, Input } from 'antd';
import { Button } from 'antd'
import MyNavLink from '../MyNavLink';
import '../Available/available.css'
import { withRouter } from 'react-router';
import axios from 'axios';
const { Content } = Layout;

class Text extends Component {
    constructor(props) {
        super(props);
        this.state = {
            color: ["white", "white", "white", "white", "white", "white", "white", "white", "white", "white"],
            flag: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            numflag: 99999,
            current: 1,
            houseArray: [],
            showArray: []
        };
    }

    componentDidMount() {
        fetch('http://60.205.246.238:3001/house/visit', {
            method: 'get',
            headers: {
                "Content-type": "application/json"
            },
        }).then((response) => {
            return response.json()
        }).then((data) => {
            this.setState({
                houseArray: data,
                showArray: data.slice(0, 10)
            })
        })
    }

    componentWillUnmount() {
        this.setState = () => false;
    }

    onpageChange = page => {
        this.setState({
            current: page,
            showArray: this.state.houseArray.slice((page - 1) * 10, (page) * 10)
        })
    };


    //实现点击更换背景颜色
    ItemOnClick = (e, index) => {
        const addflag = this.state.flag.reduce((num, total) => total + num)

        if (this.state.flag[index] === 0) {
            if (addflag === 0) {

                const newcolor = this.state.color
                newcolor[index] = "#1890FF"
                const newflag = this.state.flag
                newflag[index] = 1
                this.setState({
                    color: newcolor,
                    flag: newflag,
                    numflag: index
                })
            }

            else if (addflag === 1) {

                const newcolor = ["white", "white", "white", "white", "white", "white", "white", "white", "white", "white"]
                newcolor[index] = "#23A9F2"
                const newflag = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                newflag[index] = 1
                this.setState({
                    color: newcolor,
                    flag: newflag,
                    numflag: index
                })
            }
        }
    }
    changeerror = () => {
        alert("请选择后再进行修改！")
    }


    onSubmit = (values) => {
    };


    // onFinishFailed = (errorInfo) => {
    //     console.log('Failed:', errorInfo);
    // };

    onFinish = (values) => {
        console.log(values);
        if (values.id1 === values.id2) {
            alert("请勿输入两个相同的id交换顺序")
        }
        else {
            fetch('http://60.205.246.238:3001/house/changeSort', {
                method: 'post',
                headers: {
                    "Content-type": "application/json"
                },
                body: JSON.stringify(values)
            }).then((response) => {
                return response.json()
            }).then((data) => {
                console.log(data)
            }).catch(function (error) {
                console.log(error)
            })
        }

    };

    deleteItem = () => {
        if (this.state.numflag === 99999) {
            alert("请选择后再进行删除！")
        }
        else {
            // console.log(this.state.numflag);
            // console.log(this.state.showArray[this.state.numflag].id)
            axios({
                method: 'get',
                url: 'http://60.205.246.238:3001/house/deleteObject',
                headers: {
                    "Content-type": "application/json"
                },
                params: {
                    id: this.state.showArray[this.state.numflag].id
                }
            })
            console.log(this.state.showArray[this.state.numflag].id);
            alert("删除成功！")
        }
    }

    render() {


        return (
            <div className="" id="returnMyText">
                <Content style={{ padding: '0 50px' }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>上传发布</Breadcrumb.Item>
                        <Breadcrumb.Item>闲置房屋</Breadcrumb.Item>
                    </Breadcrumb>

                    <div className="outershow-container">
                        <div className="left">
                            <div className='leftTitle'>
                                <p>请输入两个id进行交换操作</p>
                            </div>
                            <Form
                                name="basic"
                                labelCol={{
                                    span: 8,
                                }}
                                wrapperCol={{
                                    span: 8,
                                }}
                                // defaultValues={{
                                //     remember: true,
                                // }}
                                onFinish={this.onFinish}
                                onFinishFailed={this.onFinishFailed}
                                autoComplete="off"
                            >
                                {/* <div className="change-container">
                                    <div className="changeinput-container">
                                        
                                    </div>
                                </div> */}
                                <Form.Item

                                    label="id1"
                                    name="id1"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'Please input your id1!',
                                        },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>

                                <Form.Item
                                    label="id2"
                                    name="id2"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'Please input your id2!',
                                        },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>
                                <div className="button-container">
                                    <Form.Item>
                                        <Button type="primary" htmlType="submit">
                                            提交
                                        </Button>
                                    </Form.Item>
                                </div>
                            </Form >
                        </div>

                        <div className="right">
                            <div className="show-container">
                                <div className="item-container">
                                    <div className="inline-container">
                                        <span className="span-title" style={{ flex: 0.75 }}>标题</span>
                                        <span className="line">|</span>
                                        <span className="span-id" style={{ flex: 0.25 }}>默认位置</span>
                                    </div>
                                </div>


                                {this.state.showArray.map((item, index) => {
                                    if (index < 9) {
                                        return (
                                            <div className="item-container" key={item.id} onClick={(e) => this.ItemOnClick(e, index)} style={{ backgroundColor: this.state.color[index] }}>
                                                <div className="inline-container">
                                                    <span className="span-title">{item.title}</span>
                                                    <span className="line">|</span>
                                                    <span className="span-id">{(this.state.current - 1) * 10 + index}</span>
                                                </div>
                                            </div>
                                        )
                                    }
                                    else {
                                        return (
                                            <div className="item-container" key={item.id} onClick={(e) => this.ItemOnClick(e, index)} style={{ backgroundColor: this.state.color[index] }}>
                                                <div className="inline-container">
                                                    <span className="span-title">{item.title}</span>
                                                    <span className="line">|</span>
                                                    <span className="span-id">{(this.state.current - 1) * 10 + index}</span>
                                                </div>
                                            </div>
                                        )
                                    }
                                })
                                }
                            </div>
                            <div className="pagebutton-container">
                                <Pagination {...this.props}
                                    current={this.state.current}
                                    onChange={this.onpageChange}
                                    total={Math.ceil(this.state.houseArray.length / 10) * 10}
                                />
                            </div>
                            <div className="button-container">
                                {
                                    this.state.numflag === 99999 ?
                                        (<Button type="primary" onClick={this.changeerror} >修改</Button>) :
                                        (<MyNavLink to={{
                                            pathname: '/availablechangeform',
                                            state: { item: this.state.showArray[this.state.numflag] }
                                        }}>
                                            <Button type="primary" >修改</Button>
                                        </MyNavLink>)
                                }
                                <Button type="primary" onClick={this.deleteItem}>删除</Button>
                                <MyNavLink to="/availableform">
                                    <Button type="primary">添加新项目</Button>
                                </MyNavLink>
                            </div>
                        </div>
                    </div>
                </Content >

                {/* <div className="pagebutton-container">
                    <Button >上一页</Button>
                    <span>第{ }页/共x页</span>
                    <Button >下一页</Button>
                </div> */}

                {/* <div className="button-container">
                    <Button type="primary">修改</Button>
                    <Button type="primary">删除</Button>
                    {
                        this.flag ? (<MyNavLink to={{ pathname: `/availableform`, state: { id: 99999 } }} >
                            <Button type="primary">添加新项目</Button>
                        </MyNavLink>) : (<Button>sss</Button>)
                    }
                </div> */}


            </div >
        )
    }
}

export default withRouter(Text)